<template>
  <div style="overflow: hidden; background-color: #eaeaef">
    <van-popup v-model="show" position="right" :style="{ width: '80%', height: '100%' }">
      <van-cell-group>
        <van-cell icon="user" class="settingCell">{{ username }}</van-cell>
        <van-cell icon="lock" class="settingCell" :is-link="true" @click="onChangePassword">修改密码</van-cell>
        <van-cell icon="info" class="settingCell" :is-link="true" @click="onAbout">关于</van-cell>
        <van-cell icon="checked" class="settingCell" :is-link="true" @click="onCheckUpdate">检查更新</van-cell>
      </van-cell-group>
      <van-button @click="logout" style="position: fixed; bottom: 0px; border: red solid 1px; border-radius: 2px; background-color: red; line-height: var(--footer-height)" type="primary" block>退出登录</van-button>
    </van-popup>
    <div class="m-header" style="overflow: hidden">
      <van-row type="flex" style="margin-top: 20px; height: 10%">
        <!-- <van-col span="6" justify="space-around">仓库管理系统</van-col> -->
      </van-row>
      <van-row type="flex" style="margin-top: 50px; height: 60%">
        <van-col span="2"></van-col>
        <van-col span="20" style="border: solid 1px transparent; background-color: white; border-radius: 20px; text-align: center; opacity: 90%">
          <div style="height: 100%">
            <div style="height: 50%; vertical-align: top"></div>
            <div style="height: 50%; vertical-align: top">
              <div style="width: 20%; height: 80%; display: inline-block; line-height: 80%; vertical-align: top">
                <van-icon name="user" size="30" color="#1989fa"></van-icon>
              </div>
              <div style="width: 60%; height: 80%; display: inline-block; vertical-align: top">
                <div style="font-family: 'Microsoft Yahei'; color: black; width: 60%; text-align: left; font-weight: bold">
                  {{ username }}
                </div>
                <div style="font-style: italic; color: burlywood; width: 60%; text-align: left">仓库管理系统</div>
              </div>
              <div @click="onSetting" style="width: 10%; height: 60%; display: inline-block; vertical-align: bottom">
                <span style="color: grey; font-size: small">设置</span>
              </div>
              <div @click="onSetting" style="width: 5%; height: 60%; display: inline-block; vertical-align: bottom">
                <van-icon name="setting-o" size="18" color="grey" />
              </div>
            </div>
          </div>
        </van-col>
        <van-col span="2"></van-col>
      </van-row>
    </div>
    <div style="width: 94%; margin-left: 3%; overflow: scroll; overscroll-behavior: contain" :style="{ height: screenHeight + 'px' }">
      <van-divider content-position="left" style="height: 2px; font-style: italic">成品</van-divider>
      <van-row type="flex" style="margin-top: 20px; height: 100px" gutter="20">
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="production_inbound">
            <div style="padding: 14px; vertical-align: middle">成品预收</div>
          </el-card>
        </van-col>
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="production_inbound_confirm">
            <div style="padding: 14px; vertical-align: middle">成品确认入库</div>
          </el-card>
        </van-col>
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="production_outbound">
            <div style="padding: 14px; vertical-align: middle">生产领用</div>
          </el-card>
        </van-col>
      </van-row>
      <van-divider content-position="left" style="height: 2px; font-style: italic">原料</van-divider>
      <van-row type="flex" style="margin-top: 20px; height: 100px" gutter="20">
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="raw_material_inbound">
            <div style="padding: 14px; vertical-align: middle">原料入库</div>
          </el-card>
        </van-col>
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="sales_outbound">
            <div style="padding: 14px; vertical-align: middle">销售出库</div>
          </el-card>
        </van-col>
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="production_feed">
            <div style="padding: 14px; vertical-align: middle">生产投料</div>
          </el-card>
        </van-col>
      </van-row>
      <van-divider content-position="left" style="height: 2px; font-style: italic">其它</van-divider>
      <van-row type="flex" style="margin-top: 20px; height: 100px" gutter="20">
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="move_location">
            <div style="padding: 14px; vertical-align: middle">成品原辅料移库</div>
          </el-card>
        </van-col>
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="tone_slots_recycle">
            <div style="padding: 14px; vertical-align: middle">吨槽回收</div>
          </el-card>
        </van-col>
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="location_check">
            <div style="padding: 14px; vertical-align: middle">盘点</div>
          </el-card>
        </van-col>
<!--        <van-col span="8" justify="space-around">-->
<!--          <el-card :body-style="{ padding: '0px' }" style="height: 100px">-->
<!--            <div style="padding: 14px; vertical-align: middle">销售出库</div>-->
<!--          </el-card>-->
<!--        </van-col>-->
      </van-row>
      <van-row type="flex" style="margin-top: 20px; height: 100px" gutter="20">
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="tone_slots_send">
            <div style="padding: 14px; vertical-align: middle">吨槽发出</div>
          </el-card>
        </van-col>
        <van-col span="8" justify="space-around">
          <el-card :body-style="{ padding: '0px' }" style="height: 100px" @click.native="Adjust_Tone_Slots">
            <div style="padding: 14px; vertical-align: middle">吨槽调整</div>
          </el-card>
        </van-col>
        <van-col span="8" justify="space-around">
        </van-col>
      </van-row>
<!--      <van-divider content-position="left" style="height: 2px; font-style: italic">盘点</van-divider>-->
<!--      <van-row type="flex" style="margin-top: 20px; height: 100px" gutter="20">-->
<!--      </van-row>-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      show: false,
      nativeVersion: '',
      screenHeight: ''
    };
  },
  mounted() {
    //水印
    this.username = localStorage.getItem('username');
    this.getNativeVersion(false);
    this.screenHeight = window.innerHeight - 200;
  },
  methods: {
    //获取设备当前版本与服务器版本，有新版本则弹出更新提示
    getNativeVersion() {
      let that = this;
      if (window.plus) {
        /* eslint-disable */
        plus.runtime.getProperty(plus.runtime.appid, function (inf) {
          that.nativeVersion = inf.version;
          that.checkUpdate(inf.version, true);
          localStorage.setItem('nativeVersion', inf.version);
        });
      } else {
        document.addEventListener(
          'plusready',
          function () {
            /* eslint-disable */
            plus.runtime.getProperty(plus.runtime.appid, function (inf) {
              that.nativeVersion = inf.version;
              that.checkUpdate(inf.version, false);
              localStorage.setItem('nativeVersion', inf.version);
            });
          },
          false
        );
      }
    },
    //成品入库APP-入口
    production_inbound() {
      this.$router.push({
        path: '/ScanView',
        query: { title: '成品标签扫描', key: 3 }
      });
    },
    //成品入库确认APP-入口
    production_inbound_confirm() {
      this.$router.push({
        path: '/ScanView',
        query: { title: '成品标签扫描', key: 4 }
      });
    },
    //移库APP-入库
    move_location() {
      this.$router.push({
        path: '/ScanView',
        query: { title: '标签扫描', key: 2 }
      });
    },
    //原料入库APP-入口
    raw_material_inbound() {
      this.$router.push({
        path: '/ScanView',
        query: { title: '原料标签扫描', key: 1 }
      });
    },
    //吨槽回收APP-入口
    tone_slots_recycle() {
      this.$router.push({
        path: '/ToneSlotsRecycle'
      });
    },
    //生产投料APP-入口
    production_feed() {
      this.$router.push({
        path: '/ProductionFeed'
      });
    },
    //销售出库APP-入口
    sales_outbound() {
      this.$router.push({
        path: '/ScanView',
        query: { title: '销售出库扫描', key: 6 }
      });
      /*this.$router.push({
        path: '/SalesOutbound'
      });*/
    },
    //吨槽发出
    tone_slots_send() {
      this.$router.push({
        path: '/ToneSlotsSend'
      });
    },
    //吨槽调整APP-入口
    Adjust_Tone_Slots() {
      this.$router.push({
        path: "/AdjustToneSlots",
        //query: { title: '吨槽调整',key:1 },
      });
    },
    //盘点APP-入口
    location_check(){
      this.$router.push({
        path: '/LocationCheck'
      });
    },
    //成品出库APP-入口
    production_outbound() {
      this.$router.push({
        path: '/ScanView',
        query: { title: '成品出库领料单扫描', key: 5 }
      });
    },
    //注销登录
    logout() {
      this.$dialog
        .confirm({
          title: '退出登录',
          message: '确定退出登录？'
        })
        .then(() => {
          localStorage.clear();
          this.$router.push('/Login');
          this.$message('您已注销登录');
        })
        .catch(() => {
          // on cancel
        });
    },
    //设置
    onSetting() {
      this.show = true;
    },
    //修改密码-入口
    onChangePassword() {
      this.$router.push('/ChangePassword');
    },
    //检查更新
    checkUpdate(nativeVersion, popup) {
      let that = this;
      const checkUrl = '/getVersion';
      that.$http.get(checkUrl).then(result => {
        if (!that.VersionContrast(nativeVersion, result.data.appVersionNo)) {
          this.$dialog
            .confirm({
              title: '发现新版本:' + result.data.appVersionNo + ',是否下载？',
              message: '更新内容' + result.data.updateInfo
            })
            .then(() => {
              that.downloadApk(result.data.downloadUrl);
            })
            .catch(() => {
              // on cancel
            });
        } else if (popup == true) {
          // this.$toast('当前已是最新版本');
        }
      });
    },
    //版本号对比
    VersionContrast(curV, reqV) {
      // 当前版本号：curV；比较版本号：reqV
      if (curV && reqV) {
        let arr1 = curV.split('.'),
          arr2 = reqV.split('.');
        let minLength = Math.min(arr1.length, arr2.length),
          position = 0,
          diff = 0;
        //依次比较版本号每一位大小，当对比得出结果后跳出循环（后文有简单介绍）
        while (position < minLength && (diff = parseInt(arr1[position]) - parseInt(arr2[position])) == 0) {
          position++;
        }
        diff = diff != 0 ? diff : arr1.length - arr2.length;
        //若curV大于reqV，则返回true
        return diff >= 0;
      }
    },
    // 下载apk文件
    downloadApk(url) {
      let that = this;
      let watiting = plus.nativeUI.showWaiting('安装文件...');
      let dtask = plus.downloader.createDownload(url, {
        method: 'GET',
        retry: 0
      });
      dtask.addEventListener(
        'statechanged',
        function (task, status) {
          if (!dtask) {
            return;
          }
          switch (task.state) {
            case 1:
              break;
            case 2:
              break;
            case 3:
              var nowData = Math.floor((task.downloadedSize * 100) / task.totalSize);
              console.log(nowData);
              if (nowData % 10 === 0) {
                watiting.setTitle('已下载：' + nowData + '%');
                if (nowData === 100) {
                  watiting.toast('正在准备环境，请稍后！');
                  watiting.close();
                }
              }
              break;
            case 4:
              // 安装apk资源包
              plus.runtime.install(
                dtask.filename,
                {},
                function () {
                  plus.nativeUI.closeWaiting();
                  plus.nativeUI.alert('更新完成！', function () {
                    //  更新完成后重启应用
                    plus.runtime.restart();
                  });
                },
                function (e) {
                  plus.nativeUI.closeWaiting();
                  plus.nativeUI.toast('安装更新失败！');
                }
              );
              break;
            default:
              break;
          }
        },
        false
      );
      dtask.setRequestHeader('Access-Control-Allow-Origin', '*');
      dtask.start();
    },
    //点击检查更新按钮
    onCheckUpdate() {
      this.getNativeVersion();
    },
    //关于
    onAbout() {
      this.$dialog
        .alert({
          message: '汇得PDA系统'
        })
        .then(() => {
          // on close
        });
    }
  }
};
</script>

<style>
.m-header {
  height: 200px;
  background-image: url(../../assets/image/1541386025671088083.jpg);
  background-size: cover;
  color: #fff;
  overflow: hidden;
}

.settingCell {
  height: 50px;
}
::-webkit-scrollbar {
  display: none;
}
</style>
